// 获取学员列表，并渲染到表格
function renderStudent (){
  axios({
  url:'/students',
}).then(result => {
  // console.log(result)
  let newArr = result.data.data.map(item =>{
    return `
    <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender ? '女' : '男'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
          <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
        </td>
      </tr>
    `
  })
  document.querySelector('.list').innerHTML = newArr.join('')
})
}
renderStudent()

// -----------省市县联动---------------------
let sheng = `<option value="">--省份--</option>`
let shi = `<option value="">--城市--</option>`
let xian = `<option value="">--地区--</option>`

let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')


// 获取省，并渲染
axios({
  url:'/api/province',
}).then(result =>{
  let newArr = result.data.data.map(item => `<option value="${item}">--${item}--</option>` )
  province.innerHTML = sheng + newArr.join('')
})

// 切换省，获取市并渲染
province.addEventListener('change',function  (){
  area.innerHTML = xian
  axios({
  url:'/api/city',
  params:{
    pname:province.value
  }
}).then(result => {
  let newArr = result.data.data.map(item => `<option value="${item}">--${item}--</option>` )
  city.innerHTML = shi + newArr.join('')
})
})

// 切换市，获取地区并渲染
city.addEventListener('change',function  (){
  axios({
  url:'/api/area',
  params:{
    pname:province.value,
    cname:city.value
  }
}).then(result => {
  let newArr = result.data.data.map(item => `<option value="${item}">--${item}--</option>` )
  area.innerHTML = xian + newArr.join('')
})
})


// ---------增加学员-----------
// 模态框
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

document.querySelector('#openModal').addEventListener('click',function  (){
  document.querySelector('.modal-title').innerHTML = '添加学员'
  addModal.show()
})
let title = document.querySelector('.modal-title')
document.querySelector('#submit').addEventListener('click',async function  (){
  // 获取表单各项的值，检查是否是接口需要的数据
  let form = document.querySelector('#form')
  let data = val(form)
  // console.log(data)
  // 检查数据是否是接口所需数据
  data.age = +data.age
  data.group = +data.group
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary

  // 判断一下提交到修改接口，还是添加接口
if(title === '添加学员'){
  let res1 =await axios({
    method:'POST',
    url:'/students',
    data:data,
  })
   message.success(result.data.message)
  } else{
  let id = title.dataset.id
  let res2 = await axios({
    method:'PUT',
    url:`/students/${id}`,
    data:data,
  })
}
    renderStudent(),
    form.reset(),
    addModal.hide()
  })


// --------------删除和修改-----------------
document.querySelector('.list').addEventListener('click', async function (e){
  e.preventDefault()
  // -----------删除-------------
  if(e.target.classList.contains('bi-trash')) {
    // 说明点击了删除
    let id = e.target.dataset.id
    axios({
      url:`/students/${id}`,
      method:'DELETE'
    }).then(result => {
      message.success('删除成功')
      renderStudent()
    })
  }

  // ---------编辑学员-----------
  if(e.target.classList.contains('bi-pen')) {
    // 说明点击了编辑
    let id = e.target.dataset.id
    document.querySelector('.modal-title').innerHTML = '修改成员'
    document.querySelector('.modal-title').setAttribute('data-id',id)
    addModal.show()
    // 发送请求，获取当前修改的这个学员的详细信息
    let result = await axios({url:`/students/${id}`})
    // console.log(result.data.data)

    let res1 = await axios({
      url:'/api/city',
      params:{
        pname:result.data.data.province
      }
    })
    let res2 = await axios({
      url:'/api/area',
      params:{
        pname:result.data.data.province,
        cname:result.data.data.city
      }
    })
    let newArr1 = res1.data.data.map(item => `<option value="${item}">--${item}--</option>` )
    city.innerHTML = shi + newArr1.join('')

    let newArr2 = res2.data.data.map(item => `<option value="${item}">--${item}--</option>` )
    area.innerHTML = xian + newArr2.join('')
    
    // 做数据回填，继续使用插件【val（表单，数据）】
    val(document.querySelector('#form'),result.data.data)

    let form = document.querySelector('#form')
    let data = val(form)
    console.log(data)
  }
})





